/**
 * Copyright 2023 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '~/styles/variables';

.main {
  position: relative;

  .root {
    align-items: center;
    border: 1px solid $mid_grey;
    border-radius: 100px;
    color: $mid_grey;
    display: flex;
    font-family: $font_mono;
    font-size: 12px;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    letter-spacing: 0;
    padding: 0 12px;
    transition: $fadeDuration ease;

    svg {
      height: 16px;
      width: 16px;

      &:first-of-type {
        margin-right: 5px;
      }
      path {
        transition: $fadeDuration ease;
      }
    }
    svg path {
      fill: currentColor;
    }

    &.filled {
      background: $mid_grey;
      border: 1px solid $mid_grey;
      color: $dark;

      svg path {
        fill: $dark;
      }
    }

    &:not(.filled) {
      @media screen and (min-width: $medium) {
        &:hover {
          border-color: $light;
          color: $light;
        }
      }
    }
  }

  .filterList {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(0);
    transform-origin: top left;
    transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
    z-index: 20;

    &.open {
      opacity: 1;
      pointer-events: initial;
      transform: scale(1);
    }
  }
}
.background {
  background: transparent;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 19;
}
